<template>
  <div class="container">
    <el-container style="width: 100%;height: 100%">
      <el-header
          height="76px"
          style="background-color: #8e9aaf;display: flex;justify-content: space-between;align-items: center;">
        <el-image style="width: 50px;height: 50px;margin-left: 20px"
                  :src="require('../assets/homeicon.png')"></el-image>
        <div class="title">
          欢迎来到VITALITY健身管理
        </div>
        <div class="account">
          <el-popover
              placement="top-start"
              width="600"
              trigger="hover">
            <div v-show="!isAdminInfoUpdate">
              <el-descriptions title="用户信息">
                <el-descriptions-item label="工号">{{ adminInfo.id }}</el-descriptions-item>
                <el-descriptions-item label="员工名称">{{ adminInfo.name }}</el-descriptions-item>
                <el-descriptions-item label="手机号">{{ encryptionPhone }}</el-descriptions-item>
                <el-descriptions-item label="邮箱">{{ adminInfo.email }}</el-descriptions-item>
                <el-descriptions-item label="备注">
                  <el-tag size="small">前台服务员</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="服务宗旨">一心为顾客</el-descriptions-item>
              </el-descriptions>
              <el-button icon="el-icon-edit" size="mini" type="primary" @click="goUpdateInfo">修改
              </el-button>
              <el-button icon="el-icon-switch-button" type="primary" size="mini" @click="exit"> 注销
              </el-button>
            </div>
            <div v-show="isAdminInfoUpdate">
              <el-page-header @back="goBack" content="修改信息">
              </el-page-header>
              <el-card class="update-card">
                <div slot="header" class="clearfix">
                  <span>工号{{ adminInfo.id }}</span>
                </div>
                <el-form :model="updateInfo" label-width="80px" :rules="updateRule" ref="updateForm">
                  <el-form-item label="工号">
                    <el-input disabled v-model="updateInfo.id"></el-input>
                  </el-form-item>
                  <el-form-item label="员工名称" prop="name">
                    <el-input v-model="updateInfo.name"></el-input>
                  </el-form-item>
                  <el-form-item label="手机号" prop="phone">
                    <el-input v-model="updateInfo.phone"></el-input>
                  </el-form-item>
                  <el-form-item label="邮箱" prop="email">
                    <el-input v-model="updateInfo.email"></el-input>
                  </el-form-item>
                </el-form>
                <div style="margin-bottom:10px;float: right">
                  <el-button size="small" type="primary" @click="confirmUpdate">确认修改</el-button>
                </div>
              </el-card>
            </div>
            <el-avatar slot="reference" :size="30"
                       :src="require('../assets/head/tx11215.jpg')"></el-avatar>
          </el-popover>

          <div style="  margin-left: 5px;  margin-right: 40px">
            {{ adminInfo.name }}
          </div>

        </div>
      </el-header>
      <el-container>
        <el-aside width="200px" style="height: 100%;background-color: rgb(84,92,100)" class="aside">
          <el-menu
              default-active="/home/orderData"
              class="el-menu-vertical-demo"
              background-color="#545c64"
              text-color="#fff"
              active-text-color="#ffd04b"
              :router="true">
            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-s-claim"></i>
                <span>订单管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item to="/newOrder" index="/newOrder">创建新订单</el-menu-item>
                <el-menu-item to="/orderData" index="/orderData">订单数据</el-menu-item>
                <el-menu-item to="/orderList" index="/orderList">订单查询</el-menu-item>
                <el-menu-item to="/reservationList" index="/reservationList">预约时间</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-menu-item index="/memberList">
              <i class="el-icon-s-custom"></i>
              <span slot="title">会员管理</span>
            </el-menu-item>
            <el-submenu index="3">
              <template slot="title">
                <i class="el-icon-user"></i>
                <span>员工管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/employeeList"> 员工列表</el-menu-item>
                <el-menu-item index="/workAttendance">考勤表</el-menu-item>
                <el-menu-item index="/faceRegister">人脸注册</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-menu-item index="/coachList">
              <i class="el-icon-user"></i>
              <span slot="title">教练管理</span>
            </el-menu-item>
            <el-submenu index="4">
              <template slot="title">
                <i class="el-icon-baseball"></i>
                <span>器材管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/equipList">器材列表</el-menu-item>
                <el-menu-item index="/equipOverhaul">器材维修记录</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-menu-item index="/areaList">
              <i class="el-icon-map-location"></i>
              <span slot="title">区域管理</span>
            </el-menu-item>
            <el-submenu index="6">
              <template slot="title">
                <i class="el-icon-reading"></i>
                <span>课程管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/courseList">课程订购</el-menu-item>
                <el-menu-item index="/courseOrder">课程订单</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="7">
              <template slot="title">
                <i class="el-icon-shopping-bag-1"></i>
                <span>商品管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/goodsList">商品订购</el-menu-item>
                <el-menu-item index="/goodsOrder">商品订单</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="8">
              <template slot="title">
                <i class="el-icon-coin"></i>
                <span>积分乐园</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/pointsMall">积分商城</el-menu-item>
                <el-menu-item index="/pointSelect">积分查询</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-menu-item index="/capitalHome">
              <i class="el-icon-data-line"></i>
              <span slot="title">资金汇总</span>
            </el-menu-item>
            <el-menu-item index="/suggestionList">
              <i class="el-icon-s-comment"></i>
              <span slot="title">投诉建议</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-main>
          <router-view>
          </router-view>
          <slot>
            <img src="../assets/routerBack/triangle.png" class="router-bg-img">
          </slot>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import {getAllArea} from '@/utils/apis/area'
import {updateAdminInfo} from '@/utils/apis/admin'

export default {
  name: "Home",
  mounted() {
    // //初始化管理员数据
    const adminInfo = localStorage.getItem("adminInfo")
    if (adminInfo === null) {
      this.$router.replace('/login')
    } else {
      this.$store.state.adminInfo = adminInfo
    }
    this.adminInfo = JSON.parse(this.$store.state.adminInfo)
  },
  created() {
    //获取所有区域数据
    this.getAreaAndSave()
  },
  data() {
    return {
      adminInfo: {},
      // 是否修改管理员信息
      isAdminInfoUpdate: false,
      //修改信息
      updateInfo: {},
      //修改表单校验规则
      updateRule: {
        name: [
          {required: true, message: '请输入员工名称', trigger: 'blur'},
          {min: 2, max: 8, message: '长度在 2 到 8 个字符', trigger: 'blur'}
        ],
        phone: [
          {
            validator: function (rule, value, callback) {
              if (!/^1[3456789]\d{9}$/.test(value)) {
                callback(new Error("请输入正确的手机号"));
              } else {
                callback();
              }
            }, trigger: 'blur'
          },

        ],
        email: [
          {
            validator: function (rule, value, callback) {
              if (
                  !/^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/.test(
                      value
                  )
              ) {
                callback(new Error("请输入正确的邮箱"));
              } else {
                callback();
              }
            }, trigger: 'blur'
          },
        ],
      },
    }
  },
  computed: {
    //手机号加密
    encryptionPhone() {
      const phone = this.adminInfo.phone + ''
      const reg = /(\d{3})\d{4}(\d{4})/; //正则表达式
      const result = phone.replace(reg, "$1****$2")
      return result
    }
  },
  methods: {
    exit() {
      this.$confirm('您将退出并清除关于您信息的缓存, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.state.adminInfo = {}
        localStorage.removeItem('adminInfo')
        localStorage.removeItem('token')
        this.$message.success('登出成功')
        setTimeout(() => {
          this.$router.replace('/login')
        }, 1000)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消退出'
        });
      })
    },
    getAreaAndSave() {
      const loading = this.$loading({
        lock: true,
        text: '初始化数据.......',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      //获取所有区域数据
      // getAllArea().then(res => {
      //     if (res.data.code === 200) {
      //         this.$store.commit('updateAreaList', res.data.data)
      //
      //     } else {
      //         this.$message.error('获取数据出错:' + res.data.data)
      //     }
      // })
      loading.close()
    },
    //修改员工信息
    goUpdateInfo() {
      this.isAdminInfoUpdate = true
      this.updateInfo = JSON.parse(JSON.stringify(this.adminInfo))
    },
    //退出修改信息
    goBack() {
      this.isAdminInfoUpdate = false
      this.$refs['updateForm'].clearValidate()
    },
    //提交修改信息
    confirmUpdate() {
      this.$refs['updateForm'].validate(valid => {
        if (valid) {
          updateAdminInfo(this.updateInfo).then(res => {
            if (res.data.code === 200) {
              this.$message.success('修改成功,将返回登录已更新您的信息')
              setTimeout(() => {
                this.$router.replace('/login')
              }, 800)
            }
          })
        } else {
          this.$message.warning('请正确填写表单')
        }
      })
    },
  }
}
</script>

<style scoped>
.container {
  width: 100vw;
  height: 100%;
}

.title {
  width: 500px;
  height: 50px;
  text-align: center;
  color: #0f2c99;
  font-size: 36px;
  font-weight: bold;
  font-family: "Comic Sans MS";
  margin-left: 60px;
}

.account {
  width: 130px;
  color: #49546a;
  /*text-align: center;*/
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.router-bg-img {
  z-index: -1;
  position: fixed;
  top: 0;
  left: 0;
}

.update-card {
  margin-top: 30px;
  margin-bottom: 10px;
}


</style>